<template>
  <div class="periphery">
    <div class="header-wrap">
      <span class="header-wrap-left" @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">周边</span>
      <span class="header-wrap-right"></span>
    </div>
    <div id="map"></div>
    <p class="errortext" ref="errtext"></p>
    <ul class="box">
      <li @click="getRound(index,title.name)" v-for="(title,index) in valueData" :key="index" :class="{active:categoryIndex==index}">{{ title.name }}</li>
    </ul>
    <ul class="listTyle" @click="goRoundDetail(list.uid)" v-for="(list,index) in options.listData" :key="index">
      <li style="font-weight:bold;">{{ list.name }}</li>
      <li style="margin:.2rem 0;color:rgb(238, 89, 139);">{{ list.telephone ? list.telephone : '暂无商家电话' }}</li>
      <li class="address">{{ list.address }}</li>
      <li class="go">
        <img style="width:.3rem;heiht:.3rem" src="../../assets/images/next_right.png" alt="">
      </li>
    </ul>
    <footNavTwo/>
  </div>
</template>
<script>
import {Col, Row} from 'vant';
import footNavTwo from '@/components/footNavTwo'

export default {
  components: {
    [Col.name]: Col,
    [Row.name]: Row,
    footNavTwo
  },
  data() {
    return {
      options: {
        map: '',
        listData: [],
        lat: '',
        lng: '',
        value: '',
        enableHighAccuracy: true, // --->是否获取更精确的位置  true/false
        timeout: 5000, // --->请求超时时间,单位ms；
        maximumAge: 0
      },
      categoryIndex: 0,
      msg: '',
      defvalue: '美食',
      valueData: [
        {name: '美食', id: '1'},
        {name: '景点', id: '2'},
        {name: '酒店', id: '3'},
        {name: '休闲娱乐', id: '4'},
        {name: '厕所', id: '5'},
        {name: '银行', id: '6'},
        {name: '加油站', id: '7'},
        {name: '停车场', id: '8'},
        {name: '风景区', id: '9'},
        {name: '超市', id: '10'}
      ]
    }
  },
  mounted() {

  },
  created() {
    // 百度地图API功能
    this.$nextTick(() => {
      this.getLocation()
    })
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    getLocation() {
      let geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition((position) => {
        this.options.lat = position.latitude;
        this.options.lng = position.longitude; // 经度
        this.getRound(0, this.defvalue)
      }, (error) => {
        console.log(error)
      });
    },
    // 获取周边接口
    getRound(index, value) {
      this.categoryIndex = index
      this.$jsonp("https://api.map.baidu.com/place/v2/search?query=" + value + "&location=" + this.options.lat + ',' + this.options.lng + "&radius=2000&output=json&ak=hlTOCwmv7dccdMhFXZLMYr1051QD2Vqs&s=1", {})
        .then((response) => {
          this.options.listData = response.results
          console.log(this.options.listData)
        })
        .catch((error) => {
          console.log(error);
        })
    },
    goRoundDetail(uid) {
      this.$jsonp("https://api.map.baidu.com/place/v2/detail?uid=" + uid + "&output=json&scope=2&ak=hlTOCwmv7dccdMhFXZLMYr1051QD2Vqs&s=1", {})
        .then((response) => {
          this.msg = response.result
          this.$toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            message: '加载中...',
          });
          setTimeout(() => {
            this.$toast.clear();
            window.location.href = this.msg.detail_info.detail_url
          }, 300);
        })
        .catch((error) => {
          console.log(error);
        })
    },
  },
}
</script>
<style scoped>
.box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1rem 0 .3rem 0;
}

.box li {
  color: #fff;
  background: #6dd5ed; /* fallback for old browsers */
  margin: .3rem .3rem 0;
  width: calc(25% - .6rem);
  line-height: .5rem;
  text-align: center;
  border-radius: .1rem;
  font-size: .24rem;
}

.listTyle {
  position: relative;
  background: #fff;
  padding: .4rem .2rem;
  margin: .2rem .3rem;
  border: 1px solid #eee;
  border-radius: .2rem;
}

.listTyle:nth-last-of-type(1) {
  margin: .2rem .3rem .8rem;
}

/* .listTyle span{
  display: block;
} */
.address {
  width: calc(100% - .3rem);
  font-weight: lighter;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

.go {
  position: absolute;
  right: .1rem;
  top: 45%;
  color: #ee5383;
}

.active {
  background: #57c5c6 !important; /* fallback for old browsers */
}
</style>
